<template>
  <div class="rank-page">
    <van-nav-bar title="排行榜" left-arrow @click-left="$router.back()" />
    <div class="section-title">热歌榜</div>
    <div class="rank-list">
      <div class="rank-item" v-for="(item, idx) in rankList" :key="item.id">
        <span class="rank-index" :class="{top3: idx<3}">{{ idx+1 }}</span>
        <img :src="item.cover" class="rank-cover" />
        <div class="rank-info">
          <div class="rank-title">{{ item.title }}</div>
          <div class="rank-artist">{{ item.artist }}</div>
          <div class="rank-meta">
            <span class="rank-hot">热度：{{ item.hot }}</span>
            <span v-if="item.trend==='up'" class="rank-up">↑</span>
            <span v-else-if="item.trend==='down'" class="rank-down">↓</span>
            <span v-else class="rank-flat">-</span>
          </div>
        </div>
      </div>
    </div>
    <div class="section-title">新歌榜</div>
    <div class="rank-list">
      <div class="rank-item" v-for="(item, idx) in newList" :key="item.id">
        <span class="rank-index" :class="{top3: idx<3}">{{ idx+1 }}</span>
        <img :src="item.cover" class="rank-cover" />
        <div class="rank-info">
          <div class="rank-title">{{ item.title }}</div>
          <div class="rank-artist">{{ item.artist }}</div>
          <div class="rank-meta">
            <span class="rank-hot">热度：{{ item.hot }}</span>
            <span v-if="item.trend==='up'" class="rank-up">↑</span>
            <span v-else-if="item.trend==='down'" class="rank-down">↓</span>
            <span v-else class="rank-flat">-</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const rankList = ref([
  { id: 1, title: '两难', artist: '林宥嘉', hot: 9999, trend: 'up', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 2, title: '爱情讯息', artist: '毛不易', hot: 8888, trend: 'flat', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 3, title: '于是', artist: '薛之谦', hot: 7777, trend: 'down', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 4, title: '零距离', artist: '周深', hot: 6666, trend: 'up', cover: 'https://imgs.aixifan.com/content/2018_10_21/1.5401258655421753E9.png' },
  { id: 5, title: '晴天', artist: '周杰伦', hot: 5555, trend: 'up', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800' },
  { id: 6, title: '稻香', artist: '周杰伦', hot: 4444, trend: 'flat', cover: 'https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800' },
  { id: 7, title: '青花瓷', artist: '周杰伦', hot: 3333, trend: 'down', cover: 'https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 8, title: '七里香', artist: '周杰伦', hot: 2222, trend: 'up', cover: 'https://img1.baidu.com/it/u=3575126618,2505183193&fm=253&app=138&f=JPEG?w=820&h=800' },
  { id: 9, title: '夜曲', artist: '周杰伦', hot: 1111, trend: 'flat', cover: 'https://img0.baidu.com/it/u=2030267494,2401277417&fm=253&app=138&f=JPEG?w=817&h=800' },
  { id: 10, title: '发如雪', artist: '周杰伦', hot: 999, trend: 'up', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' }
])
const newList = ref([
  { id: 11, title: '新歌A', artist: '新歌手A', hot: 5555, trend: 'up', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 12, title: '新歌B', artist: '新歌手B', hot: 4444, trend: 'flat', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 13, title: '新歌C', artist: '新歌手C', hot: 3333, trend: 'up', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 14, title: '新歌D', artist: '新歌手D', hot: 2222, trend: 'down', cover: 'https://imgs.aixifan.com/content/2018_10_21/1.5401258655421753E9.png' },
  { id: 15, title: '新歌E', artist: '新歌手E', hot: 1111, trend: 'flat', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800' }
])
</script>
<style scoped>
.rank-page { background: var(--van-background-color, #fff); min-height: 100vh; color: var(--van-text-color, #222); }
.section-title { font-weight: bold; margin: 18px 0 8px 16px; font-size: 15px; }
.rank-list { padding: 0 16px; }
.rank-item { display: flex; align-items: center; margin-bottom: 14px; }
.rank-index { width: 22px; text-align: center; font-weight: bold; font-size: 18px; }
.rank-index.top3 { color: #f56c6c; }
.rank-cover { width: 40px; height: 40px; border-radius: 8px; margin: 0 10px; }
.rank-info { flex: 1; }
.rank-title { font-weight: bold; }
.rank-artist { color: #888; font-size: 13px; }
.rank-meta { font-size: 12px; color: #aaa; display: flex; gap: 8px; align-items: center; }
.rank-up { color: #67c23a; }
.rank-down { color: #f56c6c; }
.rank-flat { color: #aaa; }
</style> 